<div class="layui-fluid" id="VIEW-list-table" lay-title="用户列表">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header" lig-lang="label-searchTitle">筛选数据</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space10 layui-form">
                        <form class="layui-form" lay-filter="lig-user-searchform" id="lig-searchform">
                            <div class="layui-row">
                                <div class="layui-inline">
                                    <label class="layui-form-label" lig-lang="user-account">登录账号</label>
                                    <div class="layui-inline">
                                        <input type="text" class="layui-input" name="account"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" lig-lang="user-userName">姓名</label>
                                    <div class="layui-inline">
                                        <input type="text" class="layui-input" name="userName"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-row layui-col-space10">
                                        <div class="layui-col-xs6">
                                            <div class="layui-btn layui-btn-sm layui-btn-fluid"
                                                 lay-filter="lig-user-search" lig-lang="btn-search">查询
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary" lig-lang="btn-reset">重置</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body nepadmin-table-full">
                    <div class="layui-btn-container nepadmin-pad-t10 nepadmin-pad-l10">
                        <div class="layui-btn layui-btn-sm" lay-filter="lig-user-add" lig-lang="btn-addUser">添加用户</div>
                    </div>
                    <table lay-filter="lig-user-table"></table>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="tpl-user-table-row-toolBar">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="lig-modify" lay-filter="lig-user-modify" lig-lang="btn-modify">修改</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="lig-delete" lay-filter="lig-user-delete" lig-lang="btn-delete">删除</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="lig-role" lay-filter="lig-user-relationRole" lig-lang="btn-relationRole">角色</a>
    </script>
    <script type="text/html" id="tpl-user-modify">
        <form class="layui-form" lay-filter="lig-saveForm" style="padding: 20px 20px 0 0;">
            <input type="hidden" name="userId" value="{{d.userId}}"/>
            <div class="layui-form-item">
                <label class="layui-form-label ligui-form-item-required" lig-lang="user-account">登录账号</label>
                <div class="layui-input-block">
                    <input type="text" name="account" autocomplete="off" class="layui-input"
                           lay-verify="required" value='{{d.account}}'>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label ligui-form-item-required" lig-lang="user-userName">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" autocomplete="off" class="layui-input"
                           lay-verify="required" value='{{d.userName}}'>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label ligui-form-item" lig-lang="user-phone">电话</label>
                <div class="layui-input-inline">
                    <input type="tel" name="phone" autocomplete="off"
                           class="layui-input" value="{{d.phone}}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label ligui-form-item" lig-lang="user-email">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" autocomplete="off" class="layui-input" value="{{d.email}}">
                </div>
            </div>
        </form>
    </script>
    <script type="text/html" id="tpl-user-add">
        <form class="layui-form" lay-filter="lig-saveForm" style="padding: 20px 20px 0 0;">
            <div class="layui-form-item">
                <label class="layui-form-label ligui-form-item-required" lig-lang="user-account">登录账号</label>
                <div class="layui-input-block">
                    <input type="text" name="account" autocomplete="off" class="layui-input" lay-verify="required"
                           value=''>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label ligui-form-item-required" lig-lang="user-userName">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" autocomplete="off" class="layui-input" lay-verify="required" value=''>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label ligui-form-item-required" lig-lang="user-password">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" lay-verify="required|password"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux" lig-lang="user-password-tip">请填写6到12位密码</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label ligui-form-item" lig-lang="user-phone">电话</label>
                <div class="layui-input-inline">
                    <input type="tel" name="phone" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label ligui-form-item" lig-lang="user-email">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
    </script>
</div>
<script type="text/html" id="tpl-user-role-add">
    <form class="layui-form" lay-filter="lig-saveForm" style="padding: 20px 20px 0 20px;">
    <input type="hidden" name="userId"/>
        <div lay-filter="lig-user-role-tree"></div>
    </form>
</script>
<script type="text/html" id="tpl-user-disabled">
  <input type="checkbox" name="disabled" lay-filter="userDisabled" lay-skin="switch" lay-text="启用|禁用" value="{{d.userId}}"
    {{ d.disabled == 0 ? 'checked' : '' }}
    >
</script>
<script>
    layui.use(['admin', 'table', 'form', 'eleTree', 'laytpl', 'jquery', 'lig'], function (admin, table, form, eleTree, laytpl, $, lig) {
        var roleTree;
        form.render();

        lig.table({
            elem: '[lay-filter="lig-user-table"]',
            url: 'uc/user/page',
            cols: [[
                {title: '<span lig-lang="label-opt">操作</span>', toolbar: '#tpl-user-table-row-toolBar', align: 'left', width: 200, fixed: 'left'},
                {title: '<span lig-lang="user-account">登录账号</span>', field: 'account', align: 'center', minWidth: 120},
                {title: '<span lig-lang="user-userName">姓名</span>', field: 'userName', align: 'center', minWidth: 120},
                {title: '<span lig-lang="user-phone">电话</span>', field: 'phone', align: 'center', minWidth: 120},
                {title: '<span lig-lang="user-disabled">启用/禁用</span>', field: 'disabled', align: 'center', width: '10%',

                    templet: '#tpl-user-disabled'
                },
                {title: '<span lig-lang="user-createdName">创建人</span>', field: 'createdName', align: 'left', minWidth: 120},
                {
                    title: '<span lig-lang="user-createdTime">创建时间</span>',
                    field: 'createdTime',
                    align: 'left',
                    templet:'<div>{{ layui.util.toDateString(d.createdTime, "yyyy-MM-dd HH:mm:ss") }}</div>',
                    minWidth: 200
                }
            ]]
        }, {
            mode: 'dialog',
            entity: 'user',
            primaryField: 'userId',
            area: ['50%', 'auto'],
            addContent: $('#tpl-user-add').html(),
            addUrl: 'uc/user/add',
            addTitle: '<span lig-lang="user-addUser">添加用户</span>',
            onAddOpened: function () {
            },
            modifyContent: $('#tpl-user-modify').html(),
            modifyUrl: 'uc/user/modify',
            modifyTitle: '<span lig-lang="user-modifyUser">修改用户</span>',
            onModifyOpened: function () {
            },
            removeUrl: 'uc/user/remove',
            getUrl: 'uc/user/{userId}',
            onTool: function (obj) {
                if (obj.event == 'lig-role') {
                    var userId = obj.data.userId;
                    lig.dialog({
                        content: $('#tpl-user-role-add').html(),
                        title: '<span lig-lang="user-relationRole">分配角色</span>',
                        area: ['30%', '60%'],
                        saveUrl: 'uc/user/role/add',
                        onSave: function(data) {
                            var _nodes = roleTree.getChecked(false, true);
                            var ids = '';
                            $.each(_nodes, function (i, it) {
                                ids += it.id + ',';
                            });
                            data.roleIdList = ids.substring(0, ids.length - 1);
                            return data;
                        },
                        onOpened: function () {
                            var _saveForm = $('[lay-filter="lig-saveForm"]');
                            _saveForm.find('input[name="userId"]').val(userId);
                            loadRoleTree(userId);
                        },
                        onCompleted: function () {
                        }
                    });
                }
            }
        });

        //监听性别操作
        form.on('switch(userDisabled)', function(obj) {
            console.log(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
            console.log(obj);
            var userId = this.value;
            var disabled = obj.elem.checked ? 0 : 1;

            lig.ajaxpost({
                url: 'uc/user/setDisabled',
                data: {
                    userId: userId,
                    disabled: disabled
                }
            });
        });

        function loadRoleTree(userId) {
            lig.ajaxget({
                url: 'uc/user/role/tree/' + userId,
                success: function (res) {
                    if (!res.data) {
                        return;
                    }

                    roleTree = eleTree.render({
                        elem: '[lay-filter="lig-user-role-tree"]',
                        highlightCurrent: true,
                        showLine: true,
                        defaultExpandAll: true,
                        defaultCheckedKeys: res.data.roleIdList ? res.data.roleIdList : [],
                        showCheckbox: true,
                        checkStrictly: true,
                        data: res.data.roleTree ? res.data.roleTree : [],
                        request: {
                            name: "name"
                        }
                    });

                }
            });
        }
    });
</script>